<template>
  <div ref="boxwrap" class="LowQuality">
    <div v-for="num in 3" :id="'pie'+num" :key="num" :width="chartStyle.width" :height="chartStyle.height" class="chart" />
  </div>
</template>

<script>
import resize from '@/components/Charts/mixins/resize'

export default ({
  name: 'LowQuality',
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: '150px'
    },
    height: {
      type: String,
      default: '150px'
    },
    isresize: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      chart: null,
      chartStyle: {
        width: 'calc(100% / 3)',
        height: '100%'
      },
      currentView: {}
    }
  },
  // computed: {
  //   ...mapGetters([
  //     'regionid',
  //     'lineId'
  //   ])
  // },
  watch: {
    width: {
      immediate: true,
      handler: function(newval, oldval) {
        this.width = newval
      },
      deep: true
    },
    height: {
      immediate: true,
      handler: function(newval, oldval) {
        this.height = newval
      },
      deep: true
    },
    isresize(newval, oldval) {
      this.movement = newval
      this.chart.resize()
    }
  },
  mounted() {
    this.getDomHeight()
    this.domResize()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  created() {
    // this.getCurrentView()
  },
  methods: {
    getDomHeight() {
      for (let i = 1; i <= 3; i++) {
        this.initChart('pie' + i)
      }
      this.chartStyle = {
        width: parseInt(this.$refs.boxwrap.clientWidth / 3) + 'px',
        height: parseInt(this.$refs.boxwrap.clientHeight / 3) + 'px'
      }
    },
    domResize() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        var width = element.clientWidth + 'px'
        var height = element.clientHeight + 'px'
        that.chartStyle = {
          width,
          height
        }
      })
    },
    getCurrentView() {
      this.currentView = {
        regionid: this.regionid,
        lineId: this.lineId
      }
      this.getData()
    },
    getData() {},
    initChart(id) {
      this.chart = this.$echarts.init(document.getElementById(id), 'jyt-dark')
      this.chart.setOption({
        title: {
          text: 'ZXCV-' + id,
          subtext: '不良率：20%',
          top: 0,
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'normal'
          },
          subtextStyle: {
            fontSize: 14,
            fontWeight: 'normal',
            lineHeight: 0
          }
        },
        series: [
          {
            name: '不良原因',
            type: 'pie',
            radius: ['20%', '40%'], // '45%'
            center: ['50%', '62%'],
            // roseType: 'area', // 'radius'
            itemStyle: {
              borderRadius: 3
            },
            label: {
              formatter: '{b}\n{d}%',
              fontSize: 10,
              color: '#fff'
            },
            labelLine: {
              length: 10,
              length2: 4
            },
            data: [
              { value: parseInt(Math.random() * 10), name: '不良1' },
              { value: parseInt(Math.random() * 10), name: '不良2' },
              { value: parseInt(Math.random() * 10), name: '不良3' },
              { value: parseInt(Math.random() * 10), name: '不良4' },
              { value: parseInt(Math.random() * 10), name: '不良5' }
            ]
          }
        ]
      })
    }
  }
})
</script>
<style lang="scss">
.LowQuality{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;

  .chart{
    flex: 1;
  }
}
</style>

